<template>
  <div class="camera">
    <div class="index cha mui-icon mui-icon-closeempty" @click="back"></div>
    <div class="index fanzhuan">
      <div @click="routeCamera">翻转摄像头</div>
      <div @click="OpenAndCloseCamera">{{buffer==null?'打开':'关闭'}}摄像头</div>
    </div>
    <video class="video" ref="video" webkit-playsinline='true' playsinline='true' x-webkit-airplay='true'
           x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-ignore-metadata='true'></video>
    <div class="buttom">
      <div class="buttom_radius"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "camera",
    data() {
      return {
        front: true,
        buffer: null,
        mediaRecorder: null,
        constraints: {
          audio: true,
          video: {
            facingMode: (this.front ? "user" : "environment"),
            frameRate: {
              ideal: 10,
              max: 15
            }
          }
        }
      }
    },
    mounted() {
      this.invokingCarera();
    },
    methods: {
      back() {
        var that = this;
        var btnArray = ['否', '是'];
        mui.confirm("确定退出吗？", "提示", btnArray, function (e) {
          if (e.index == 1) {
            that.$router.go(-1);
          }
        }, 'div');
      },
      OpenAndCloseCamera() {
        if (this.buffer == null) {
          this.invokingCarera();
        } else {
          this.buffer && this.buffer.getTracks()[1].stop();
          this.buffer = null;
        }
      },
      routeCamera() {
        this.front = !this.front;
        this.buffer && this.buffer.getTracks()[1].stop();
        this.buffer = null;
        this.invokingCarera();
      },
      invokingCarera() {
        const that = this;
        console.log(that.$refs.video)
        if (navigator.mediaDevices || navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia(that.constraints)
            .then(function (mediaStream) {
              that.buffer = mediaStream;
              that.mediaRecorder = new MediaRecorder(mediaStream);
//							MediaRecorder.stop()    // 停止录制
//							MediaRecorder.resume()   // 恢复录制
//							MediaRecorder.pause()   // 暂定录制
//							MediaRecorder.start()   // 开始录制
              if (that.$refs.video.mozSrcObject !== undefined) {
                that.$refs.video.mozSrcObject = that.buffer;
              } else {
                that.$refs.video.src = window.URL && window.URL.createObjectURL(that.buffer);
              }
              that.$refs.video.onloadedmetadata = function (e) {
                that.$refs.video.play();
              };
            })
            .catch(function (error) {
              console.log(`${error.name}: ${error.message}`);
            })
        } else {
          mui.alert('不支持摄像头调用！', '', '', '', 'div');
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .camera {
    width: 100%;
    height: 100%;
    position: relative;

    .cha {
      position: absolute;
      left: 5%;
      top: 1%;
      font-size: 42px;
      color: white;
    }

    .index {
      z-index: 100;
    }

    .fanzhuan {
      position: absolute;
      right: 8%;
      top: 5%;
      font-size: 24px;
      color: white;

      div {
        margin-bottom: 10px;
      }
    }

    .video {
      position: absolute;
      top: 0;
      left: 0;
      object-fit: cover;
      object-position: center center;
      width: 100%;
      height: 100%;
    }

    .buttom {
      width: 100%;
      height: 120px;
      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .buttom_radius {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: red;
      }
    }
  }
</style>
